.border-radius( @radius: 3px ) {
	-webkit-border-radius: @radius;
	   -moz-border-radius: @radius;
	   -khtml-border-radius: @radius;
	   -o-border-radius: @radius;
	   -ms-border-radius: @radius;
	        border-radius: @radius;		
}

.box-shadow(@shadow:0px 2px 2px #DDD){
	-webkit-box-shadow: @shadow;
	-moz-box-shadow: @shadow;
	-khtml-box-shadow: @shadow;
	-o-box-shadow: @shadow;
	-ms-box-shadow: @shadow;
	box-shadow: @shadow;
	
}

.outline-radius( @radius: 3px ) {
	-webkit-outline-radius: @radius;
	   -moz-outline-radius: @radius;
	        outline-radius: @radius;		
}



.transition(
	@what : all,
	@length : 1s,
	@easing : ease-in-out
) {
	-webkit-transition: @what @length @easing;
	   -moz-transition: @what @length @easing;
	     -o-transition: @what @length @easing;
		  	transition: @what @length @easing;			
}

.transform(
	@params 
) {
	-webkit-transform: @params;
  	   -moz-transform: @params;
  	        transform: @params;
}


.flex( @val : 1 ) {
	-webkit-box-flex: @val;
	   -moz-box-flex: @val;
	        box-flex: @val;
}

.resize( @direction ) {
	-webkit-resize: @direction;
	   -moz-resize: @direction;
	        resize: @direction;
}

.linear-gradient( 
	@begin: black, 
	@end: white,
	@switch : 100%
) {
	background:  @begin;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(@begin), color-stop(@switch, @end));
	background: -moz-linear-gradient(top, @begin, @end @switch);
	background: -o-linear-gradient(top, @begin, @end @switch);
	background: linear-gradient(top, @begin, @end @switch);
}
    
.double-borders( 
	@colorOne : green,
	@colorTwo : red,
	@radius : 0
) {
	border: 1px solid @colorOne;
		
	-webkit-box-shadow: 0 0 0 1px @colorTwo;	
	   -moz-box-shadow: 0 0 0 1px @colorTwo;
	   		box-shadow: 0 0 0 1px @colorTwo;
	   		
	.border-radius( @radius );
}

.triple-borders( 
	@colorOne : green,
	@colorTwo : red,
	@colorThree : blue,
	@radius : 0
) {
	border: 1px solid @colorOne;
	
	.border-radius( @radius );

	-webkit-box-shadow: 0 0 0 1px @colorTwo, 0 0 0 2px @colorThree;	
	   -moz-box-shadow: 0 0 0 1px @colorTwo, 0 0 0 2px @colorThree;
	   		box-shadow: 0 0 0 1px @colorTwo, 0 0 0 2px @colorThree;
}

.columns(
	@count : 3,
	@gap : 10
) {
	-webkit-column-count: @count;
	   -moz-column-count: @count;
	        column-count: @count;

	-webkit-column-gap: @gap;
	   -moz-column-gap: @gap;
	        column-gap: @gap;
}

.box-sizing( @type : border-box ) {
	-webkit-box-sizing: @type;
	   -moz-box-sizing: @type;
	        box-sizing: @type;		
}

.object-fit(@type:contain){
	-ms-object-fit: @type;
	-moz-object-fit: @type;
	-o-object-fit: @type;
	-webkit-object-fit: @type;
	object-fit: @type;
}

.user-select(@value:none){
	-moz-user-select: @value;
	-webkit-user-select: @value;
	-khtml-user-select: @value;
	-ms-user-select: @value;
	user-select: @value;
}




/* I am using classes from http://snipplr.com/view/47181/less-classes/ for border radius */
.css3button(
	@bg : #666,
	@border : 1px,
	@border-rad : 0.3em
){
	display:inline-block;
	outline:none;
	line-height:2em;
	border:@border solid desaturate(darken(@bg,10%),50%);
	background: -webkit-gradient(linear, 0 0, 0 100%, 
					from(lighten(@bg,60%)), 
					color-stop(3%, lighten(@bg,30%)),
					color-stop(100%, @bg),
					);
	background: -moz-linear-gradient(top, 
					lighten(@bg,60%) 0%,
					lighten(@bg,30%) 3%, 
					@bg 100%);
	text-shadow: 0 1px 1px rgba(255,255,255,0.6);
	.border-radius(@border-rad);
	color:desaturate(darken(@bg,20%),50%);
	font-weight:bold;
	text-decoration:none;
	padding:0 1em;
	
	&:active {
		
		background: -moz-linear-gradient(top, 
						lighten(@bg,30%) 0%,
						@bg 2%, 
						lighten(@bg,30%) 100%);
		background: -webkit-gradient(linear, 0 0, 0 100%, 
						from(lighten(@bg,30%)), 
						color-stop(2%, @bg),
						color-stop(100%, lighten(@bg,30%)),
						);
		text-shadow: 0 -1px 1px rgba(255,255,255,0.6);
	}
	
}